<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shop-button.html">
<link rel="import" href="shop-common-styles.html">
<link rel="import" href="shop-form-styles.html">

<dom-module id="shop-cart">

  <template>

    <style include="shop-common-styles shop-button shop-form-styles">

      .list {
        margin: 40px 0;
      }

      .checkout-box {
        font-weight: bold;
        text-align: right;
        margin-right: 10px;
      }

      .subtotal {
        margin: 0 64px 0 24px;
      }

      @media (max-width: 767px) {

        .subtotal {
          margin: 0 0 0 24px;
        }

      }

    </style>

    <div class="main-frame">
      <div class="subsection" visible$="[[!_hasItems]]">
        <p class="empty-cart">当前 <iron-icon icon="shopping-cart"></iron-icon> 是空的.</p>
      </div>
      <div class="subsection" visible$="[[_hasItems]]">
        <header>
          <h1>我的购物车</h1>
          <span>([[_getPluralizedQuantity(cart.length)]])</span>
        </header>
        <div class="list">
          <dom-repeat items="[[cart]]" as="entry">
            <template>
              <shop-cart-item entry="[[entry]]"></shop-cart-item>
            </template>
          </dom-repeat>
        </div>
        <div class="checkout-box">
          总计: <span class="subtotal">[[_formatTotal(total)]]</span>
          <shop-button responsive>
            <a href="/checkout">立即结账</a>
          </shop-button>
        </div>
      </div>
    </div>

  </template>

  <script>

    class ShopCart extends Polymer.Element {

      static get is() { return 'shop-cart'; }

      static get properties() { return {

        total: Number,

        cart: Array,

        visible: {
          type: Boolean,
          observer: '_visibleChanged'
        },

        _hasItems: {
          type: Boolean,
          computed: '_computeHasItem(cart.length)'
        }

      }}

      _formatTotal(total) {
        return isNaN(total) ? '' : '￥' + total.toFixed(2);
      }

      _computeHasItem(cartLength) {
        return cartLength > 0;
      }

      _getPluralizedQuantity(quantity) {
        return quantity + ' ' + (quantity === 1 ? '件商品' : '件商品');
      }

      _visibleChanged(visible) {
        app.$.customerService.className = visible?"action":"";
        if (visible) {
          // Notify the section's title
          this.dispatchEvent(new CustomEvent('change-section', {
            bubbles: true, composed: true, detail: { title: 'Your cart' }}));
        }
      }

    }

    customElements.define(ShopCart.is, ShopCart);

  </script>

</dom-module>
